<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="__GLOBAL__/confirmPay/css/mui.min.css" rel="stylesheet"/>
    <script src="__GLOBAL__/confirmPay/js/mui.min.js"></script>
    <script src="__GLOBAL__/js/jquery.min.js"></script>
    <title>向商户付款</title>
    <style>
        .mui-table-view-cell:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 15px;
            height: 0px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
        }
        #sumitbtn{
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #27ad1e;
            background: -moz-linear-gradient(top, #8bdb8a 0%, #27ad1e 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bdb8a), color-stop(100%,#27ad1e));
            background: -webkit-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: -o-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: -ms-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: linear-gradient(to bottom, #8bdb8a 0%,#27ad1e 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bdb8a', endColorstr='#27ad1e',GradientType=0 );
        }
        .yellowBack{
            background: -moz-linear-gradient(top, #FFEEDD 0%, #FFA042 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFEEDD), color-stop(100%,#FFA042));
            background: -webkit-linear-gradient(top,  #FFEEDD 0%,#FFA042 100%);
            background: -o-linear-gradient(top,  #FFEEDD 0%,#FFA042 100%);
            background: -ms-linear-gradient(top,  #FFEEDD 0%,#FFA042 100%);
            background: linear-gradient(to bottom, #FFEEDD 0%,#FFA042 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEDD', endColorstr='#FFA042',GradientType=0 );
        }
        .blueBack{
            background: -moz-linear-gradient(top, #8bdb8a 0%, #27ad1e 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bdb8a), color-stop(100%,#27ad1e));
            background: -webkit-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: -o-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: -ms-linear-gradient(top,  #8bdb8a 0%,#27ad1e 100%);
            background: linear-gradient(to bottom, #8bdb8a 0%,#27ad1e 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bdb8a', endColorstr='#27ad1e',GradientType=0 );
        }
        #boxShadow{
            -moz-box-shadow:5px 5px 10px #8bdb8a;
            -webkit-box-shadow:5px 5px 10px #8bdb8a;
            box-shadow:5px 5px 10px #8bdb8a;
        }
        #newKeyBoard{
            position: fixed;
            bottom: 0;
            z-index: 9999;
            width: 100%;
        }
        table{
            border-collapse: collapse;
        }
        table tr td{
            text-align: center;
            height: 50px;
            /*border: 1px solid #9c9c9c;*/
        }
        table tr td input{
            width: 100%;
            height: 50px;
            font-size: 20px !important;
            border: 1px solid #ccc!important;
            border-radius: 3px!important;
            background: white !important;
        }
        .leftLine{
            height:30px; display: inline-block; border-left: 2px solid #27ad1e;
            animation:anim 1s infinite alternate;
            -webkit-animation:anim 1s infinite alternate;
            -ms-animation:anim 1s infinite alternate;
            -o-animation:anim 1s infinite alternate;
            -moz-animation:anim 1s infinite alternate;
        }
        @keyframes anim{

            25%{
                border-left: 2px solid #27ad1e;
            }
            50%{
                border-left: 2px solid #FFFFFF;
            }
            100%{
                border-left: 2px solid #27ad1e;
            }
        }
    </style>
</head>
<body>
<div class="mui-content">
    <form id="onlyForm" action="__SELF__" method="post" class="mui-input-group">
        <input type="hidden" name="i" value="{$payInfo}">
        <div class="blueBack" style="height: 176px;">
            <div style="width: 92%; margin-left: 4%; padding-top: 15px;">
                <div class="mui-row">
                    <div style="float: left;">
                        <div class="yellowBack" style="width: 80px; height: 80px; border-radius: 50%;">
                            <img style="display: block;width: 100%; border-radius: 50%;" class="mui-media-object mui-pull-left head-img" id="head-img" src="__GLOBAL__/confirmPay/images/waiter.png" />
                        </div>
                    </div>
                    <div style="color: white; height: 80px; margin-left: 95px;">
                        <div style="font-size: 20px; font-weight: bold; margin-top: 17px;">
                           畅宝网络有限公司
                        </div>
                        
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
        </div>

        <div style="position: absolute; padding-bottom: 10px; z-index: 1000; top: 111px; width: 92%; margin-left: 4%;">
            <div style="height: 10px; width: 100%; background-color: #c5efc5; border-radius: 8px;"></div>
            <div id="boxShadow" style="background-color: white; margin: 0 10px; padding: 10px 20px;">
                <div class="mui-row" style="font-size: 18px;">付款金额</div>
                <div class="mui-row" id="line_color" style="height:50px; margin-top: 10px; border-bottom: 1px solid #fff;">
                    <div class="mui-row" style="width: 100%; white-space: nowrap; height: 50px; text-align: center; font-size: 0; margin: 0 auto; position: relative; overflow-x: auto; overflow-y: hidden;">
                        <span style="font-size: 27px;line-height: 50px;">￥</span>
                        <span id="showMoney" style="font-size: 40px; line-height: 40px;"></span>
                        <span class="leftLine"></span>
                        <input name="amt" id="amt" readonly="readonly" type="hidden" style="border: 1px solid red;">
                    </div>
                </div>
                <div id="pleaseTitle" class="mui-row" style="text-align: center; font-size: 17px; color: #9c9c9c;">
                    <span>请输入与商家约定的付款金额</span>
                </div>
                <div class="mui-content" style="padding: 10px 10px 0 10px;background: white;">
                    <a class="mui-btn mui-btn-block mui-btn-yellow" id="sumitbtn" style="font-size: 20px; margin-bottom: 5px;">支付</a>
                </div>
            </div>

        </div>

        <div id="newKeyBoard" class="mui-row">
            <table style="width: 100%;">
                <tr>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="1" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="2" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="3" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3" rowspan="2">
                        <input type="button" style="height: 100px;" value="删除" />
                    </td>
                </tr>
                <tr>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="4" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="5" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="6" />
                    </td>
                </tr>
                <tr>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="7" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="8" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="9" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3" rowspan="2">
                        <input type="button" style="height: 100px; background-color: #f86369 !important; color: white;" value="确定" />
                    </td>
                </tr>
                <tr>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="." />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="0" />
                    </td>
                    <td class="mui-col-sm-3 mui-col-xs-3">
                        <input type="button" value="" />
                    </td>
                </tr>
            </table>
        </div>

    </form>

</div>
<script>
    $(function(){
        $("td input").on("click",function(){
            var theVal = $(this).val();
            if(theVal == "删除"){
                var delVal = $("#showMoney").text();
                var length = delVal.length;
                $("#showMoney").text(delVal.substring(0,length-1));
                $("#amt").val(delVal.substring(0,length-1));
            }else{
                if(theVal == "."){
                    var delVal = $("#showMoney").text();
                    if(delVal == ""){
                        $("#showMoney").text("0.");
                        $("#amt").val("0.");
                    }else{
                        if(delVal.indexOf(".") > 0){

                        }else{
                            $("#showMoney").text(delVal+theVal);
                            $("#amt").val(delVal+theVal);
                        }
                    }

                }else{
                    if(theVal == "确定"){
                        $("#newKeyBoard,.leftLine").css("display","none");
                    }else{
                        var dangNum = $("#showMoney").text();
                        if(dangNum.indexOf(".") > 0){

                            var str0 = dangNum.split(".")[0];
                            var str1 = dangNum.split(".")[1];
                            if(str1.length > 1){
                                str1 = str1.slice(0,2);
                                $("#showMoney").text(str0+"."+str1);
                                $("#amt").val(str0+"."+str1);
                            }else{
                                $("#showMoney").text(dangNum+theVal);
                                $("#amt").val(dangNum+theVal);
                            }

                        }else{
                            var moneyVal = $("#showMoney").text()+theVal;
                            $("#showMoney").text(moneyVal);
                            $("#amt").val(moneyVal);
                        }
                    }
                }
            }
        });

        $("#line_color").on("click",function(){
            if('1' == "0"){
                $("#newKeyBoard").css("display","");
                $(".leftLine").css("display","inline-block");
            }
        });
    });
</script>
<script>
    var byId = function(id) {
        return document.getElementById(id);
    };
    var amtinput=byId("amt");

    if('1' == "1"){
        <!--amtinput.value = '';-->
        <!--amtinput.readOnly = true;-->
        $("#showMoney").text( '{$money}');
        byId("amt").value = '{$money}';
        $(".leftLine,#pleaseTitle,#newKeyBoard").css("display","none");
    }else{
//            amtinput.readOnly = false;
    }

    byId("sumitbtn").addEventListener('tap', function() {
        var isMoney=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        var form=byId("onlyForm");
        if(!isMoney.test(amtinput.value)){
            amtinput.value="";
            mui.toast('金额输入不正确');
        }else{
            //amtinput.value=fmoney(amtinput.value,2);
            form.submit();
        }
    });

    
    function changeColor(){
        byId("line_color").style.borderBottom="1px solid #000";
    }
    function changeColor1(){
        byId("line_color").style.borderBottom="1px solid #fff";
    }
</script>
</body>
</html>